<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>会员余额：￥<span id="span1">0</span>元</p>
  <input type="text" id="input1" placeholder="请输入充值金额">
  <button id="btn1">充值</button>
  <script>
    // js的组成部分：ECMAScript(js的核心)+DOM(文档对象模型)+BOM(浏览器对象模型)
    var myName = `Jack`;
    let age = 18;
    let isBoy = true;
    let citys = ['西安', '杨凌', '汉中', '富平', '延安'];
    let person = {
      name: 'MaBuoguo',
      age: 69,
      hasWude: true,
      kongFu: [
        '耗子尾汁',
        '偷袭',
        '大意了没有闪',
        '有备而来',
        '接化发'
      ]
    }
    function showValue() {
      console.log(myName);
      console.log(age);
      console.log(isBoy);
      console.log(citys);
      console.log(person);
    }
    showValue()
    // ===============================
    // 选择元素
    let btn = document.getElementById('btn1');
    let input = document.querySelector('#input1');
    let span = document.querySelector('#span1');
    // 点击按钮，充值。监听事件
    btn.onclick = function() {
      console.log(input.value);
      console.log(span.innerHTML);
      console.log(Number(span.innerHTML) + input.value*1);
      let finalNum = Number(span.innerHTML) + input.value*1;
      span.innerHTML = finalNum;
    }
  </script>
</body>

</html>